<template>
	<view class="container">
		<view class="top-text">{{ $t('index.topText') }}</view>
		<view class="img-box">
			<view class="img-item" @click="jumpAnimal('')">
				<image src="/static/img-sq.png"></image>
			</view>
			<view class="img-item" @click="jumpAnimal('bee')">
				<image src="/static/img-bee.png" mode=""></image>
			</view>
			<view class="img-item" @click="jumpAnimal('cat')">
				<image src="/static/img-cat.png"></image>
			</view>
		</view>

		<view class="cure-btn" @click="toJump">{{ $t('index.cureBtn') }}</view>

		<tab-bar :curIndex="0"></tab-bar>
	</view>
</template>

<script>
	import TabBar from '@/pages/components/tab-bar/index.vue'
	export default {
		components: {
			TabBar
		},
		data() {
			return {}
		},
		methods: {
			
			jumpAnimal(type) {
				uni.navigateTo({
					url:'/pages/index/select-character/index?animal='+type
				})
			},
			
			toJump(){
				uni.navigateTo({
					url: '/pages/index/select-character/index'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background: url('/static/cure-bg.jpg') top center no-repeat;
		background-size: 100%;
		padding-top: 24rpx;

		.top-text {
			margin: 268rpx 0 0 152rpx;
			width: 530rpx;
			font-size: 27rpx;
			color: #3A221E;
			text-align: right;
		}

		.img-item {
			width: 230rpx;
			height: 230rpx;
			position: absolute;

			image {
				width: 100%;
				height: 100%;
			}

			&:nth-child(1) {
				top: 660rpx;
				left: 70rpx;
				animation: floatPulse 6s ease-in-out infinite;

				image {
					animation-delay: 0.3s;
				}
			}

			&:nth-child(2) {
				top: 420rpx;
				right: 180rpx;
				animation: float 5s ease-in-out infinite alternate-reverse;

				image {
					animation: beeWings 0.4s ease-in-out infinite alternate;
				}
			}

			&:nth-child(3) {
				bottom: 560rpx;
				right: 90rpx;
				animation: float 6s ease-in-out infinite alternate;

				image {
					animation-delay: imageFloat 0.6s;
				}
			}
		}

		// 文字浮动动画
		@keyframes textFloat {
			0% {
				transform: translateY(0) rotate(0.5deg);
			}

			100% {
				transform: translateY(-5rpx) rotate(-0.5deg);
			}
		}

		// 图片浮动动画
		@keyframes float {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(-20rpx);
			}
		}

		// 图片上下浮动
		@keyframes imageFloat {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(-15rpx);
			}
		}

		// 蜜蜂翅膀动画
		@keyframes beeWings {
			0% {
				transform: rotate(-5deg);
			}

			100% {
				transform: rotate(5deg);
			}
		}


		// 新增浮动和脉冲动画
		@keyframes floatPulse {
			0% {
				transform: translateY(0) scale(1);
				box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
			}

			25% {
				transform: translateY(-15rpx) scale(1.05);
				box-shadow: 0 0 10rpx 5rpx rgba(255, 255, 255, 0.2);
			}

			50% {
				transform: translateY(0) scale(1);
				box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
			}

			75% {
				transform: translateY(-10rpx) scale(1.03);
				box-shadow: 0 0 8rpx 3rpx rgba(255, 255, 255, 0.2);
			}

			100% {
				transform: translateY(0) scale(1);
				box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
			}
		}

		.cure-btn {
			margin-left: -100rpx;
			position: absolute;
			left: 50%;
			bottom: 280rpx;
			width: 200rpx;
			height: 200rpx;
			line-height: 200rpx;
			text-align: center;
			background-color: #52A5F3;
			border-radius: 50%;
			font-size: 72rpx;
			color: #fff;
			z-index: 10;
			box-shadow: none;
			animation: pulse 2s infinite ease-in-out;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.5);
				z-index: -1;
				animation: ringPulse 3s infinite ease-in-out;
			}

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.3);
				z-index: -2;
				animation: ringPulse2 4s infinite ease-in-out;
			}
		}

		// Button pulse animation
		@keyframes pulse {

			0%,
			100% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.05);
			}
		}

		// First ring animation
		@keyframes ringPulse {
			0% {
				transform: scale(1);
				opacity: 0.7;
			}

			70% {
				transform: scale(1.5);
				opacity: 0;
			}

			100% {
				transform: scale(1.5);
				opacity: 0;
			}
		}

		// Second ring animation (out of sync)
		@keyframes ringPulse2 {
			0% {
				transform: scale(1);
				opacity: 0.4;
			}

			30% {
				transform: scale(1.3);
				opacity: 0;
			}

			100% {
				transform: scale(1.3);
				opacity: 0;
			}
		}
	}
</style>